import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
// 数据加载懒加载函数
/**
 * 数据懒加载，当分区进入可视区才发送网络请求
 * @param {*} apiFn
 * @returns {Object} {list , target}
 */
export const useLazyData = (apiFn) => {
  const list = ref([])
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
    // console.log(isIntersecting, '元素可见性')
      if (isIntersecting) {
        // console.log(target.value, '元素可见, 发送网络请求~~~~~')
        apiFn().then(({ result }) => {
        // console.log(result)
          list.value = result
        })

        // 请求发送后，停止检查
        stop()
      }
    },
    // 第三个参数在0-1之间
    { threshold: [0] }
  )
  //   钩子函数返回 --> 响应式数据 （目标元素，后台数据）
  return { list, target }
}
